<template>
	<view class="store-detail">
		<view class="store-gap"></view>
		
		<u--form 
			:model="postForm" 
			:rules="postRules" 
			errorType="none" 
			labelPosition="top" 
			labelWidth="auto" 
			ref="postRef" 
			:labelStyle="{'font-size': '30rpx'}">
			<view class="store-form">
				<u-form-item label="分店门头照" prop="storeImage" borderBottom>
					<view class="upload-box" hover-class="btn-hover" @click="onUploadCover">
						<image v-if="postForm.storeImage" class="upload-image" :src="postForm.storeImage" mode="aspectFit"></image>
						<view v-else class="upload-btn">
							<image class="upload-icon" src="@/static/icons/up-img.png" mode="aspectFit"></image>
							<text class="upload-text">上传门头照</text>
						</view>
					</view>
				</u-form-item>
				
				<u-form-item label="分店名称" prop="storeName" borderBottom>
					<u-input 
						v-model="postForm.storeName" 
						border="none" 
						inputAlign="left" 
						fontSize="30" 
						placeholder="请输入分店名称" 
						placeholderClass="contact-inputholder" 
					></u-input>
				</u-form-item>
				
				<u-form-item label="法人代表" prop="legalName" borderBottom>
					<u-input 
						v-model="postForm.legalName" 
						border="none" 
						inputAlign="left" 
						fontSize="30" 
						placeholder="请输入法人代表" 
						placeholderClass="contact-inputholder" 
					></u-input>
				</u-form-item>

				<u-form-item label="手机号码" prop="mobile" borderBottom>
					<u-input 
						v-model="postForm.mobile" 
						border="none" 
						inputAlign="left" 
						fontSize="30" 
						placeholder="请输入手机号码" 
						placeholderClass="contact-inputholder" 
					></u-input>
				</u-form-item>
				
				<u-form-item label="分店地址" prop="county" borderBottom @click="onToggleRegion">
					<u-input 
						:value="regionFormat" 
						border="none" 
						inputAlign="left" 
						disabled 
						disabledColor="#fff" 
						fontSize="30" 
						placeholder="请选择分店地址" 
						placeholderClass="contact-inputholder" 
					></u-input>
					<view slot="right" class="m-l-10">
						<view class="icon-anim" :class="{'icon-run': showRegion}">
							<u-icon name="arrow-right" color="#333" size="24rpx"></u-icon>
						</view>
					</view>
				</u-form-item>
				
				<u-form-item label="详细地址" prop="addressDetail">
					<u-textarea
						v-model="postForm.addressDetail"
						border="surround" 
						confirmType="done" 
						fontSize="30" 
						placeholder="请输入详细地址" 
						placeholderClass="contact-inputholder" 
					></u-textarea>
				</u-form-item>
			</view>
		</u--form>
		
		<view class="store-submit">
			<template v-if="update">
				<u-button
					type="error" 
					shape="circle" 
					:customStyle="{'height': '90rpx', 'font-size': '28rpx'}"
					@click="handleDelete"
				>删除门店</u-button>
				<view class="gap-v"></view>
			</template>
			
			<u-button
				type="primary" 
				shape="circle" 
				:customStyle="{'height': '90rpx', 'font-size': '28rpx'}"
				:loading="submitLoading"
				@click="handleSubmit"
			>{{ update ? '确定更新' : '确定新增' }}</u-button>
		</view>
		
		<!-- 选择省市区 -->
		<u-popup
			:show="showRegion" 
			:round="10" 
			@close="onToggleRegion">
			<region-select @change="onRegionChange"></region-select>
		</u-popup>
	</view>
</template>

<script>
	import { deepClone } from "@/utils/util.js"
	import { onSingleUploadImage } from "@/utils/upload.js"
	import { storeInfo, storeDel, storeSave } from '@/api/store.js'
	
	const postForm = {
		storeImage: '',
		storeName: '',
		legalName: '',
		mobile: '',
		province: '',
		city: '',
		county: '',
		provinceName: '',
		cityName: '',
		countyName: '',
		addressDetail: '',
	}
	const postRules = {
		storeImage: [
			{ required: true, message: '请上传门头照', trigger: ['change'] },
		],
		storeName: [
			{ required: true, message: '请输入分店名称', trigger: ['blur', 'change'] },
			{ min: 2, max: 20, message: '分店名称长度为2-20个字符', trigger: ['blur', 'change'] },
		],
		legalName: [
			{ required: true, message: '请输入法人代表', trigger: ['blur', 'change'] },
			{ min: 2, max: 10, message: '法人代表长度为2-10个字符', trigger: ['blur', 'change'] },
		],
		mobile: [
			{ required: true, message: '请输入11位手机号', trigger: ['blur', 'change'] },
			{
				validator: (rule, value, callback) => uni.$u.test.mobile(value), 
				message: '手机号格式不正确', 
				trigger: ['blur'] ,
			},
		],
		county: [
			{ required: true, message: '请选择分店地址', trigger: ['change'] },
		],
		addressDetail: [
			{ required: true, message: '请输入详细地址', trigger: ['blur', 'change'] },
		],
	}
	
	export default {
		props: {
			update: Boolean,
			storeId: [Number, String],
		},
		data() {
			return {
				postForm: deepClone(postForm),
				postRules: postRules,
				submitLoading: false,

				showRegion: false,
			}
		},
		computed: {
			regionFormat() {
				const { provinceName, cityName, countyName, county } = this.postForm
				if (county) {
					return `${provinceName}-${cityName}-${countyName}`
				}
			}
		},
		watch: {
			storeId() {
				if (this.update) {
					this.getInfo()
				} else {
					this.postForm = deepClone(postForm)
				}
			}
		},
		created() {
			// #ifdef H5
			if (this.update) {
				this.getInfo()
			} else {
				this.postForm = deepClone(postForm)
			}
			// #endif
		},
		methods: {
			// 详情
			async getInfo() {
				try {
					uni.showLoading({ title: '加载中' })
					const { data } = await storeInfo(this.storeId)
					this.postForm = data
				} finally {
					uni.hideLoading()
				}
			},
			// 上传图片
			async onUploadCover() {
				const { url } = await onSingleUploadImage()
				this.postForm.storeImage = url
			},
			// 显示地区选择
			onToggleRegion() {
				this.showRegion = !this.showRegion
			},
			// 选择地区
			onRegionChange(event) {
				const { province, city, district } = event
				this.onToggleRegion()
				this.postForm.province = province.value
				this.postForm.city = city.value
				this.postForm.county = district.value
				this.postForm.provinceName = province.text
				this.postForm.cityName = city.text
				this.postForm.countyName = district.text
			},
			// 提交
			handleSubmit() {
				this.$refs.postRef.validate().then(async () => {
					try {
						this.submitLoading = true
						await storeSave(this.postForm, this.update)
						this.$emit('submit', this.postForm)
						uni.navigateBack()
					} catch(e) {
						uni.showToast({
							title: e.message,
							icon: 'none'
						})
					} finally {
						this.submitLoading = false
					}
				}).catch(errors => {
					uni.showToast({
						title: errors[0].message || '请填写必填项',
						icon: 'none'
					})
				})
			},
			// 删除
			handleDelete() {
				uni.showModal({
					title: '删除',
					content: '确定要删除该分店吗？',
					confirmText: '确定',
					success: async ({ confirm }) => {
						if (!confirm) return false
						try {
							uni.showLoading({ title: '正在删除' })
							await storeDel(this.storeId)
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							})
							this.$emit('submit', this.postForm)
							uni.navigateBack()
						} catch(e) {
							uni.showToast({
								title: e.message,
								icon: 'none'
							})
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.contact-inputholder {
		font-size: 30rpx;
		font-weight: 300;
		line-height: 1.2;
		color: $u-tips-color !important;
	}
</style>
<style lang="scss" scoped>
	.store-detail {
		.store-tips {
			padding: 30rpx;
			background-color: $u-nav-color;
			&-title {
				font-size: 44rpx;
				font-weight: normal;
				line-height: 1;	
				color: $u-main-color;
			}
			&-info {
				margin-top: 10rpx;
				font-size: 28rpx;
				font-weight: normal;
				color: $u-content-color;
			}
		}
		.store-gap {
			height: 20rpx;
		}
		.store-form {
			padding: 10rpx 30rpx;
			background-color: #fff;
			.icon-anim {
				transition: transform 0.2s;
				transform: rotate(0deg);
			}
			.icon-anim.icon-run {
				transform: rotate(180deg);
			}
			.upload-box {
				position: relative;
				width: 280rpx;
				height: 160rpx;
				border: 1px solid $u-border-color;
				border-radius: 16rpx;
				overflow: hidden;
				box-sizing: border-box;
				.upload-image {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}
				.upload-btn {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.upload-icon {
						width: 88rpx;
						height: 88rpx;
					}
					.upload-text {
						font-weight: 400;
						font-size: 24rpx;
						color: $u-tips-color;
					}
				}
				.upload-btn[disabled] {
					background-color: #eee;
					pointer-events: none;
				}
			}
		}
		.store-submit {
			padding: 50rpx 30rpx;
		}
	}
</style>